<template>
  <view class="page custom-page">
    <custom-head gradient back title="修改密码"></custom-head>
    <view class="addition">
      <view class="tab_list">
        <u-form :model="form" ref="uForm" label-width="180">
          <u-form-item label="旧密码" 
          :label-style="{'white-space': 'nowrap'}"
          prop="old_password"
          >
            <u-input type="password" placeholder="请输入旧密码" v-model="form.old_password" />
          </u-form-item>

          <u-form-item label="新密码" 
          :label-style="{'white-space': 'nowrap'}"
          prop="new_password"
          >
            <u-input type="password" placeholder="请输入新密码" v-model="form.new_password" />
          </u-form-item>
        </u-form>

      </view>
      
      <u-button class="button" type="primary" @click="submit">提交</u-button>
    </view>
    
  </view>
</template>
<script>
import { updatePassword } from '../../api/modules/user';
import md5 from 'md5';
export default {
  data() {
    return {
      form: {
        old_password: '', // 手机号码
        new_password: '', // 新密码
      },
      rules: {
				old_password: [
					{ 
						required: true, 
						message: '请输入旧密码', 
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change','blur'],
					}
				],
				new_password: [
					{
						required: true, 
						message: '请输入新密码', 
						trigger: ['change','blur']
					}, {
            validator:  (rules, value, callback) => {
              if (value === '') {
                callback(new Error('请输入密码'));
              } else {
                callback()
              }
            },
            message: '两次密码校验不一致',
            trigger: ["change","blur"]
          }
				],
			},
      show: false, // 是否禁用按钮
      countdown: 60, // 秒钟
    }
  },

  // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
  computed: {
    buttonText: function() {
      return this.show ? `${this.countdown}秒后重新获取` : "获取验证码";
    }
  },
  mounted() {},
  methods: {
    submit() {
      this.$refs.uForm.validate(valid => {
        if (valid) {
          const { old_password, new_password } = this.form || {};
          let data = {
            old_password: md5(old_password),
            new_password: md5(new_password),
          }
          this._updatePassword(data)
        } else {
          console.log('验证失败');
        }
      });
    },
    _updatePassword(data) {
      updatePassword(data).then(res => {
        const { code, message } = res || {}
        if (code === 201) {
          this.$u.toast('修改密码成功')
          uni.navigateBack({
            delta:1,
          })
        } else {
          this.$u.toast(`${message}`)
        }
      })
    }
  }
}
</script>
<style scoped lang="scss">
.page {
  background-color: #ffffff;
  height: 100vh;
}
.addition {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0 40rpx;
  height: 100%;
  .tab_list {
    .u-form-item__body {
      display: flex;
    }

    .text {
      width: 180rpx;
      height: 60rpx;
      font-size: 24rpx;
      padding: 0 10rpx;
    }
    
  }
  .button {
      width: 100%;
      height: 88rpx;
      border-radius: 44rpx;
      margin: 80rpx 0 40rpx 0;
      background-color: #2979ff;
      color: #fff;
      font-size: 32rpx;
      text-align: center;
      line-height: 88rpx;
    }
}
</style>
